<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>静态页面</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="./css/page.css" />
</head>
<body style="width: 1920px">
    <!-- 分三部分  搜索栏 数据展示区域 分页区域-->
    <div class="contains">
        <!-- 搜索栏 -->
        <div class="searchArea">
            <div class="searchTitle title">
                <!-- 搜索图标 -->
                <div class="leftArea">
                    <img src="./images/search.png"/>
                </div>
                <div class="titleText">筛选查询</div>
                <!-- 收起筛选 -->
                <div class="screen" id="pull" data-mark="1">
                    <div class="imgArea">
                            <img src="./images/arrowOn.png"/>
                    </div>
                    <div class="collapseScreening">收起筛选</div>
                </div>
                <!-- 查询按钮 -->
                <div class="btn_search">
                    <button>查询结果</button>
                </div>
            </div>
            <!-- 正文 -->
            <div class="searchContent" id="searchAllContent">
                <label for="buyer" class="col15" >
                    <span class="inputName">采购商名称：</span>
                    <select id="buyer" class="selectStyle">
                        <option value="suning">苏宁</option>
                        <option value="ali">阿里</option>
                    </select>
                </label>

                <label for="fixedAmount" class="col15">
                    <span class="inputName">固定额度初审结果：</span>
                    <select id="buyer" class="selectStyle">
                        <option value="select">已对帐</option>
                        <option value="unSelect">未对账</option>
                    </select>
                </label>

                <label for="temporaryLimit" class="col15">
                        <span class="inputName">临时额度初审结果：</span>
                        <select id="buyer" class="selectStyle">
                            <option value="select">已对帐</option>
                            <option value="unSelect">未对账</option>
                        </select>
                    </label>
            </div>
        </div>
        <!-- 数据展示区域 -->
        <div class="dataArea">
            <div class="searchTitle title">
                <!-- 搜索图标 -->
                <div class="leftArea">
                    <img src="./images/tab_classification.png"/>
                </div>
                <div class="dataText">数据列表</div>
                <!-- 显示条数 -->
                <div class="page_Num">
                    <select id="dataNumber" class="dataSeletStyle">
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                            <option value="5">5</option>
                    </select>
                </div>
                <!-- 排序方式 -->
                <div class="sort_way">
                    <select id="sortData" class="dataSeletStyle">
                            <option value="ascending">升序</option>
                            <option value="descending">降序</option>
                    </select>
                </div>
            </div>
            <!-- 详细数据 -->
            <div class="dataDetail">
                <div class="dataCheckbox">
                    <label for="fixedAmount">
                        <input type="checkbox" id="allCheckSelect">    
                    </label>
                </div>
                <div class="data">
                    <table width="100%" cellspacing="0" class="enterpriseTb">
                        <thead>
                            <tr>
                                <th width="13%" class="tdStyle">企业名称</th>
                                <th width="13%" class="tdStyle">联系电话</th>
                                <th width="13%" class="tdStyle">法人姓名</th>
                                <th width="16%" class="tdStyle">法人身份证</th>
                                <th width="13%" class="tdStyle">经营品类</th>
                                <th width="22%" class="tdStyle">评分级别</th>
                                <th width="10%" class="tdStyle">操作</th>
                            </tr>
                        </thead>
                        <tbody>
                                <tr>
                                    <td  width="13%" class="tdStyle">盛世金陵</td>
                                    <td  width="13%" class="tdStyle">1850000000</td>
                                    <td  width="13%" class="tdStyle"></td>
                                    <td  width="16%" class="tdStyle"></td>
                                    <td  width="13%" class="tdStyle"></td>
                                    <td  class="tdStyle score">
                                        <div class="scoreImg">
                                            <img src="./images/heart.png"/>
                                            <img src="./images/heart.png"/>
                                            <img src="./images/heart.png"/>
                                            <img src="./images/heart.png"/>
                                            <img src="./images/heart.png"/>
                                        </div>
                                        <div class="scoreNum">92分</div>
                                    </td>
                                    <td  width="10%" class="tdStyle curStyle">查看详情</td>
                                </tr>
                                <tr class="tableTitle">
                                    <td colspan="2" class="tdStyle">固定审批额度</td>
                                    <td colspan="2" class="tdStyle">临时额度</td>
                                    <td colspan="2" class="tdStyle">可用额度</td>
                                    <td class="tdStyle">总额度</td>
                                </tr>
                                <tr>
                                    <td colspan="2" class="tdStyle">120000</td>
                                    <td colspan="2" class="tdStyle">20000</td>
                                    <td colspan="2" class="tdStyle">7000</td>
                                    <td class="tdStyle">14000</td>
                                </tr>
                        </tbody>
                    </table>
                    <table width="100%" class="enterpriseTb" cellspacing="0">
                        <tr class="tableTitle">
                            <td width="15%" rowspan="2" class="tdStyle">固定审批额度</td>
                            <td width="10%" class="tdStyle">申请额度</td>
                            <td width="10%" class="tdStyle">放款额度</td>
                            <td width="15%" class="tdStyle">外派风控初审</td>
                            <td width="15%" class="tdStyle">总部风控初审</td>
                            <td width="15%" class="tdStyle">评审中心初审</td>
                            <td width="10%" class="tdStyle">放款状态</td>
                            <td width="10%" class="tdStyle">操作</td>
                        </tr>
                        <tr>
                            <td width="10%" class="tdStyle">1500000</td>
                            <td width="10%" class="tdStyle">120000</td>
                            <td width="15%" class="tdStyle">待审核</td>
                            <td width="15%" class="tdStyle">待审核</td>
                            <td width="15%" class="tdStyle">待审核</td>
                            <td width="10%" class="tdStyle">待放款</td>
                            <td width="10%" class="tdStyle colorTip curStyle">
                                <div style="height:20px">审批</div>
                                <div style="height:30px">审批记录</div>
                            </td>
                        </tr>
                    </table>
                    <table width="100%" class="enterpriseTb" cellspacing="0">
                            <tr class="tableTitle">
                                <td width="15%" rowspan="2" class="tdStyle">固定审批额度</td>
                                <td width="10%" class="tdStyle">申请额度</td>
                                <td width="10%" class="tdStyle">放款额度</td>
                                <td width="15%" class="tdStyle">外派风控初审</td>
                                <td width="15%" class="tdStyle">总部风控初审</td>
                                <td width="15%" class="tdStyle">评审中心初审</td>
                                <td width="10%" class="tdStyle">放款状态</td>
                                <td width="10%" class="tdStyle">操作</td>
                            </tr>
                            <tr>
                                <td width="10%" class="tdStyle">1500000</td>
                                <td width="10%" class="tdStyle">120000</td>
                                <td width="15%" class="tdStyle">待审核</td>
                                <td width="15%" class="tdStyle">待审核</td>
                                <td width="15%" class="tdStyle">待审核</td>
                                <td width="10%" class="tdStyle">待放款</td>
                                <td width="10%" class="tdStyle curStyle">查看详情</td>
                            </tr>
                    </table>
                </div>
                <!-- 试试看flex布局 -->

            </div>
        </div>
        <!-- 分页区域 -->
        <div class="pageArea">
            <div class="allAheckbox">
                <label for="allCheck">
                        <input type="checkbox" id="allCheckSelect"><span style="visibility: hidden;">.</span>全选
                </label>
            </div>
            <div class="operationArea">
                <label for="operation">
                    <select id="operation">
                        <option value="batchOperation">批量操作</option>
                    </select>
                </label>
            </div>
            <div class="btn_batch">
                <button id="batch_btn">确定</button>
            </div>
            <!-- 分页具体区域 -->
            <div class="pageDetail">
                <span class="pageTip">共<span style="color: red">10</span>页<span style="color: red">100</span>条数据</span>
                <span class="likeList">
                    首页
                </span>
                <span class="likeList arrowLi">
                    <
                </span>
                <ul style="display: inline-block;">
                    <li class="activeLi">1</li>
                    <li>2</li>
                    <li>...</li>
                    <li>5</li>
                    <li>6</li>
                    <li>...</li>
                </ul>
                <span class="likeList arrowLi">
                    >
                </span>
                <span class="likeList listRight">
                    末页
                </span>

                <span class="pageTip">共50页&nbsp;跳转至</span>
                <div class="toPage">
                    <label for="toPageNum">
                            <input type="text" id="toPageNum" value="1" style="text-align: center">
                    </label>
                </div>
                <span>页</span>
                <span class="ok_btn">确定</span>
            </div>
        </div>
    </div>
    <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
    <script src="./js/page.js"></script>
    <script src="./js/ArrayUtil.js"></script>
    <script type="text/javascript">
        var array1 = [{
            name: "Jimmery",
            age: "22",
            id: 1
        }, {
            name: "zou",
            age: "25",
            id: 2
        }];
        var array2 = [{
            name: "Jimmery",
            age: "32",
            id: 1
        }, {
            name: "zou",
            age: "25",
            id: 2
        }];
        //第三个参数 传一个唯一标记值
        var array3 = ArrayUtil.updateList(array1, array2, 'id');
    </script>
</body>
</html>